﻿@{
	ViewBag.Title = "Index";
	Layout = "~/Views/Shared/_Layout.cshtml";
}

<div id="toolbar_wrapper" class="clearfix">
	@if (ViewBag.IsInEditMode)
	{
		<h4>工房管理</h4>

		<div class="btn-group">
			<button id="tcmsmap_new" class="btn"><i class="icon-plus"></i> 添加</button>
			<button id="tcmsmap_save" class="btn"><i class="icon-save"></i> 保存</button>
		</div>
	}
	else
	{
		<h4>工房状态</h4>
        <form method="post" action="@Url.Action("Search")">
      	    <div class="toolbar">
		        <div class="span2">
			        <label>部门:</label>
		        </div>
		        <div class="span2 input-append">
			        <select class="input-mini" name="department">
                        <option />
                        @foreach (var item in ViewBag.Departments)
                        {
                        <option value="@item">@item</option>
                        }
                    </select>
		        </div>
		        <div class="span2">
			        <label>班组:</label>
		        </div>
		        <div class="span2 input-append">
			        <select class="input-mini" name="team">
                        <option />
                        @foreach (var item in ViewBag.Teams)
                        {
                        <option value="@item">@item</option>
                        }
                    </select>
		        </div>
		        <div class="span2">
			        <label>工房:</label>
		        </div>
		        <div class="span2 input-append">
			        <select class="input-mini" name="shopFloor">
                        <option />
                        @foreach (var item in ViewBag.ShopFloors)
                        {
                        <option value="@item.ShopName">@item.ShopName</option>
                        }
                    </select>
		        </div>
                <div class="span2">
			        <label>起始:</label>
		        </div>
		        <div class="span3 input-append">
			        <input class="span2" type="text" id="from" name="from">
			        <span class="add-on"><i class="icon-calendar"></i></span>
		        </div>
		        <div class="span2">
			        <label>截止:</label>
		        </div>
		        <div class="span3 input-append">
			        <input class="span2" type="text" id="to" name="to" />
			        <span class="add-on"><i class="icon-calendar"></i></span>
		        </div>
			    <button id="task_search" type="submit" class="btn btn-mini" style="margin-top:4px;"><i class="icon-search"></i></button>
	        </div>
        </form>
    }
</div>
<div id="altContent">
</div>
<div id="dialog-form" style="display: none">
	<p class="validateTips">请填写下列项目</p>
 
	<form>
        <input type="hidden" name="id" id="id" />
		<fieldset>
			<label for="shopName">名称：</label>
			<input type="text" name="shopName" id="shopName" class="text ui-widget-content ui-corner-all" />
			<label for="icon">图片：</label>
			<select name="icon" id="icon">
                @foreach (var item in ViewBag.Icons)
                {
                <option value="@item">@item</option>
                }
            </select>
			<label for="is_available">是否可用：</label>
			<input type="checkbox" name="is_available" id="is_available" class="text ui-widget-content ui-corner-all" />
		</fieldset>
	</form>
</div>

@section inlinestyle {
#toolbar_wrapper { background: #ccc; }
#toolbar_wrapper h4 { float: left; line-height: 36px; margin: auto;}
#toolbar_wrapper .btn-group { margin: 3px 5px 0 0; float: right; }
	.toolbar {
		background: #ccc;
		padding-top: 4px;
        float: right;
	}
    .toolbar label {
        text-align: right;
        line-height: 30px;
    }

    .toolbar .span2 { width: 48px; }
    .toolbar .btn { width: 24px; }
}

@section links {
    <link rel="stylesheet" href="~/Content/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="~/Content/font-awesome/css/font-awesome.css" />
    <link rel="stylesheet" href="~/Content/jqueryui/css/jquery-ui.css" />
    <link rel="stylesheet" href="~/Content/timepicker/jquery-ui-timepicker-addon.css" />
}

@section scripts {
	<script type="text/javascript" src="~/Content/common/js/swfobject.js"></script>
    <script type="text/javascript" src="~/Content/common/js/json2.js"></script>
    @Scripts.Render("~/bundles/js/jquery_ui_ligerui")
	<script type="text/javascript">
		var randomnumber=Math.floor(Math.random()*10000);
		var flashvars = {
			"isInEditMode" : @ViewBag.IsInEditMode.ToString().ToLower(),
			"targetURL" : "@Url.Action("Status", "ShopFloor")",
            "resourceURL" : "@Url.Content("~/Content/map")",
            // 鼠标划过时背景的颜色
            "hoverBackgroundColor"  : "#a2adff",
            // 鼠标划过时工房名称的颜色
            "hoverForegroundColor"  : "#000000",
            // 空闲工房名称的颜色
            "idealForegroundColor"  : "#006600",
            // 使用中工房名称的颜色
            "busyForegroundColor"   : "#ff0000",
            // 悬浮框背景的颜色
            "tooltipBackgroundColor": "#ffffe1",
            // 悬浮框中文字的颜色
            "tooltipForegroundColor": "#000000",
            // 悬浮框边框颜色
            "tooltipBorderColor"    : "#ff0000"
		};
		var params = {
			menu: "false",
			scale: "noScale",
			allowFullscreen: "true",
			allowScriptAccess: "always",
			bgcolor: "",
			wmode: "opaque" // can cause issues with FP settings & webcam
		};
		var attributes = {
			id:"tcmsmap"
		};
		swfobject.embedSWF(
			"@Url.Content("~/Content/swf/tcmsmap.swf")", 
			"altContent", "928", "100%", "10.0.0", 
			"expressInstall.swf", 
			flashvars, params, attributes);

		function loaded() {
			var raw = '@Html.Raw(ViewBag.SerializedShopFloors)';
			var me = $('#tcmsmap')[0].loadWorkShops(raw);
		}

		function changeSWFHeight(height) {
			$('#tcmsmap').height(height);
		}

		@if (ViewBag.IsInEditMode)
  { 
		<text>

		function updateTips(t) {
			$( ".validateTips" ).html(t).addClass( "ui-state-highlight" );
			setTimeout(function() {
				$( ".validateTips" ).removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}

		function checkLength( o, n, min, max ) {
			var len = o.val().length;
			if ((len < min) || (len > max)) {
				o.addClass("ui-state-error");
				updateTips("<strong>" + n + "</strong>的长度必须介于" + min + "与" + max + "之间" );
				return false;
			} else {
				return true;
			}
		}

		function deleteWorkshop(id, shopName) {
			$('<div title="确认?"/>').html("确定要删除工房<strong>" + shopName + "</strong>吗？").dialog({
				width: 240,
				modal: true,
				buttons: {
					"确定": function() {
						$.post("@Url.Action("DeleteShopFloor", "ShopFloor")", {"id": id}).done(function(msg) {
							$('<div title="删除成功"/>').html(msg).dialog({
								modal: true,
								buttons: {
									"确定": function() {
										$('#tcmsmap')[0].deleteWorkshop(id)
										$(this).dialog("close");
									}
								}
							});
						}).fail(function(result) {
							$('<div title="删除失败"/>').html(result.responseText).dialog({
								modal: true,
								buttons: {
									"确定": function() {
										$(this).dialog("close");
									}
								}
							});
						});
						$(this).dialog("close");
					},
					"取消": function() {
						$( this ).dialog( "close" );
					}
				}
			});
		}

        function editWorkshop(id, shopName, icon, is_available) {
            $('#shopName').val(shopName);
            $('#id').val(id);
            $('#icon').val(icon);
            $('#is_available').prop('checked', is_available);

			$( "#dialog-form" ).dialog({
				resize:"auto",
                title: '编辑工房',
				//autoOpen: false,
				modal: true,
				buttons: {
					"保存": function() {
						if (checkLength($('#shopName'), "名称", 3, 10)) {
							$('#tcmsmap')[0].updateWorkshop($('#id').val(), $('#shopName').val(), $('#icon').val(), $("#is_available").prop('checked'));
							$(this).dialog("close");
						}
					},
					"取消": function() {
						$( this ).dialog( "close" );
					}
				}
			}).dialog('open');
        }

		</text>
  } @* end if *@

        $(function() {
	        $(window).scroll(function() {
		        var offset = $('.container').offset();
		        var height = $('.navbar').outerHeight();
		        if($(window).scrollTop() > (offset.top - height)) {
			        $('#toolbar_wrapper').width($('.container').width()).css({'position' : 'fixed', 'top' : height + 'px', 'left' : offset.left + 'px', 'z-index' : '99'});
		        }
		        else {
			        $('#toolbar_wrapper').removeAttr('style');
		        }
	        });

	        @if (ViewBag.IsInEditMode)
         {
		        <text>

		    $('#tcmsmap_new').click(function() {
                $('#shopName').val('');
                $('#id').val('');
                $('#icon').val(0);
                $('#is_available').prop('checked', true);

			    $( "#dialog-form" ).dialog({
				    resize:"auto",
                    title: '创建新工房',
				    //autoOpen: false,
				    modal: true,
				    buttons: {
					    "创建": function() {
						    if (checkLength($('#shopName'), "名称", 3, 10)) {
							    $('#tcmsmap')[0].addWorkshop($('#shopName').val(), $('#icon').val(), $("#is_available").prop('checked'), 100, 100);
							    $(this).dialog("close");
						    }
					    },
					    "取消": function() {
						    $( this ).dialog( "close" );
					    }
				    }
			    });
		    });

		    $('#tcmsmap_save').click(function() {
			    var o = $('#tcmsmap')[0].getPositions();
			    var string = JSON.stringify(o);
		
			    $.post("@Url.Action("UpdatePositions", "ShopFloor")", {"data": string}).success(function(msg) {
				    $('<div title="保存成功"/>').html(msg).dialog({
					    modal: true,
					    buttons: {
						    "确定": function() {
							    $(this).dialog("close");
						    }
					    }
				    });
			    }).error(function(result) {
				    $('<div title="保存失败"/>').html(result.responseText).dialog({
					    modal: true,
					    buttons: {
						    "确定": function() {
							    $(this).dialog("close");
						    }
					    }
				    });
			    });
		    });
		        </text>
         } else {
		        <text>

            $.datepicker.setDefaults({ // Default regional settings
	            closeText: '完成', // Display text for close link
	            prevText: '向前', // Display text for previous month link
	            nextText: '向后', // Display text for next month link
	            currentText: '今天', // Display text for current month link
	            monthNames: ['一月','二月','三月','四月','五月','六月',
		            '七月','八月','九月','十月','十一月','十二月'], // Names of months for drop-down and formatting
	            monthNamesShort: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'], // For formatting
	            dayNames: ['星期日', '星期二', '星期三', '星期四', '星期五', '星期五', '星期六'], // For formatting
	            dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], // For formatting
	            dayNamesMin: ['日','一','二','三','四','五','六'], // Column headings for days starting at Sunday
	            weekHeader: 'Wk', // Column header for week of the year
	            dateFormat: 'yy-mm-dd', // See format options on parseDate
	            firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ...
	            isRTL: false, // True if right-to-left language, false if left-to-right
	            showMonthAfterYear: false, // True if the year select precedes month, false for month then year
	            yearSuffix: '年' // Additional text to append to the year in the month headers
            });

//	        $("#from").datepicker({
//	            defaultDate: "+1w",
//	            changeMonth: true,
//	            numberOfMonths: 1,
//	            onSelect: function (selectedDate) {
//	                $("#to").datepicker("option", "minDate", selectedDate);
//	            }
//	        });
//	        $("#to").datepicker({
//	            defaultDate: "+1w",
//	            changeMonth: true,
//	            numberOfMonths: 1,
//	            onSelect: function (selectedDate) {
//	                $("#from").datepicker("option", "maxDate", selectedDate);
//	            }
//	        });

            $('#from').datetimepicker({ 
            	addSliderAccess: true,
	            sliderAccessArgs: { touchonly: false },
	            onClose: function(dateText, inst) {
		            if ($('#to').val() != '') {
			            var testStartDate = $('#from').datetimepicker('getDate');
			            var testEndDate = $('#to').datetimepicker('getDate');
			            if (testStartDate > testEndDate)
				            $('#to').datetimepicker('setDate', testStartDate);
		            }
		            else {
			            $('#to').val(dateText);
		            }
	            },
	            onSelect: function (selectedDateTime){
		            $('#to').datetimepicker('option', 'minDate', $('#from').datetimepicker('getDate') );
	            }
            });
            $('#to').datetimepicker({ 
            	addSliderAccess: true,
	            sliderAccessArgs: { touchonly: false },
	            onClose: function(dateText, inst) {
		            if ($('#from').val() != '') {
			            var testStartDate = $('#from').datetimepicker('getDate');
			            var testEndDate = $('#to').datetimepicker('getDate');
			            if (testStartDate > testEndDate)
				            $('#from').datetimepicker('setDate', testEndDate);
		            }
		            else {
			            $('#from').val(dateText);
		            }
	            },
	            onSelect: function (selectedDateTime){
		            $('#from').datetimepicker('option', 'maxDate', $('#to').datetimepicker('getDate') );
	            }
            });

		        </text>

         } @* end if *@
        });
    </script>
}